<template>
  <div class="w-100">
    <!-- :key="reloadForm" -->
    <div class="tabs-content" v-if="!showResult">
      <!-- <el-steps :active="active" align-center>
        <el-step v-for="(item, index) in TabsList" :key="index" :title="item.label" description="" />
      </el-steps> -->
      <el-scrollbar max-height="80vh" v-if="!loading">
        <div class="active-item" v-if="active == 1">
          <BaseInfo ref="formRef" @submit="onChange"></BaseInfo>
        </div>
        <div class="active-item" v-if="active == 2">
          <Extend ref="formRef" @submit="onChange"></Extend>
        </div>
        <div class="active-item" v-if="active == 3">
          <Other ref="formRef" @submit="onChange"></Other>
        </div>
        <div class="active-item" v-if="active == 4">
          <OperationsRecords ref="formRef" @submit="onChange"></OperationsRecords>
        </div>
      </el-scrollbar>
      <div class="fc">
        <el-button
          class="ap-btn"
          type="primary"
          @click="handleSubmit('submit')"
        >
          提交保存
        </el-button>
      </div>
    </div>
    <DataGather
      v-else
      changeType="服务设施"
      :dataType="3"
      :name="nowRowData.name"
      :active="active"
      @backNext="handleBackNext"
      @back="handleBack"
      @init="getInitMod"
    ></DataGather>
  </div>
</template>

<script setup lang="ts">
// import { getAreaObj } from '@/utils/util'
import BaseInfo from './BaseInfo/index.vue'
import Extend from './Extend/index.vue'
import Other from './Other/index.vue'
import OperationsRecords from './OperationsRecords/index.vue'
import DataGather from '@/views/datacenter/components/DataGather/change/index.vue'
import apiMod from '@/apiMod'
import { useCommonStore } from '@/stores/common'

const emit = defineEmits(['refresh'])
const {setLoading} = useCommonStore()
const { tempNowObj } = storeToRefs(useCommonStore())
let nowData = ref({})
let baseData = {}
const reloadForm = ref(0)
provide('nowRowData', nowData)
type Props = {
  nowRowData?: any
}
// 此处接收到的是基础数据
const props = withDefaults(defineProps<Props>(), {})
const formRef = ref(null)
const active: any = ref(tempNowObj.value?.active || 1)
const showResult = ref(false)
const operateType = ref('')
const loading = ref(false)
// const next = () => {
//   if (active.value++ >= 4) active.value = 4
// }
// const TabsList = [
//   {
//     label: '基础信息',
//     prop: 'dp_service_object'
//   },
//   {
//     label: '扩展信息',
//     prop: 'dp_service_object_extend'
//   },
//   {
//     label: '其他信息',
//     prop: 'dp_service_object_other'
//   }
// ]
let rechangeData = ref({})
provide('rechangeData', rechangeData)

const getInitMod = () => {
  active.value = 1
  showResult.value = false
}

const handleSubmit = (type) => {
  operateType.value = type
  formRef.value!.onSave()
}

const handleBackNext = () => {
  showResult.value = false
  emit('refresh')
  // next()
}
const onChange = (data) => {
  showResult.value = true
}
const getInitData = () => {
  loading.value = true
  setLoading()
  apiMod
    .dpServiceFacility_details(props.nowRowData.soleValue)
    .then((res) => {
      setLoading()
      // 拿到拓展和其他，以及一些老人用品，设施和运营记录
      // dpFacilityEquipmentList
      // dpOperateRecordList
      // dpSenileProductsList
      // dpServiceFacilityExtend
      // dpServiceFacilityOther
      let dailyDeliveryOfFoodAid
       if(props.nowRowData.dailyDeliveryOfFoodAid && !Array.isArray(props.nowRowData.dailyDeliveryOfFoodAid)) {
        dailyDeliveryOfFoodAid = props.nowRowData.dailyDeliveryOfFoodAid?.split(',')
      }

      let data = {
        dpServiceFacilityObject:{
          ...props.nowRowData,
          dailyDeliveryOfFoodAid
        },
        ...res.data
      }
     
      baseData = Object.freeze(JSON.parse(JSON.stringify(data)))
      nowData.value = {
       data:data,
       baseData:baseData
      }
      loading.value = false
    })
    .catch((err) => {
      loading.value = false
    })
}
const handleBack = () => {
  showResult.value = false
  reloadForm.value = Math.random()
  getInitData()
}
onMounted(() => {
  getInitData()
})
</script>

<style scoped lang="scss">
.active-item {
  padding: 1rem;
  margin: 1rem;
}
</style>
